﻿
<div id="main-wrapper">
	<h1>
		<i class="glyphicon glyphicon-question-sign"></i>讲座提问
	</h1>
	<form id="form-qna-toggle">
		<div class="btn-group btn-group-lg">
			<button class="btn btn-default" name="state" value="open" disabled>开启</button>
			<button class="btn btn-default" name="state" value="close" disabled>关闭</button>
		</div>
	</form>
	<!-- Nav tabs -->
	<ul class="nav nav-tabs">
		<li>
			<a class="ex-link" href="#tab-list" data-toggle="tab">问题列表</a>
		</li>
		<li>
			<a class="ex-link" href="#tab-add" data-toggle="tab">提出问题</a>
		</li>
	</ul>
	<!-- Tab panes -->
	<div class="tab-content">
		<div class="tab-pane active" id="tab-list">
			<table id="table-msglist" class="table table-striped">
			<thead>
			<tr>
				<th>听众昵称</th>
				<th>提问内容</th>
			</tr>
			</thead>
			<tbody>
                <script type="text/html" id= "tr-tmpl">
                    <tr>
                        <td><%- audienceName %></td>
                        <td><%- text %></td>
                    </tr>
                </script>
			</tbody>
			<tfoot>
			<tr>
				<td colspan="2">
					<script type="text/html" id="pagin-tmpl">
						<ul class="pagination">
							<li>
								<a onclick="getMessageList(1)">&laquo;</a>
							</li>
							<% if (current > 2){ %>
								<li class="disabled">
									<a>..</a>
								</li>
							<% } %>
							<% if (prev) { %>
								<li>
									<a onclick="getMessageList(<%- prev %>)"><%- prev %></a>
								</li>
							<% } %>
							<li class="active">
								<a onclick="getMessageList(<%- current %>)"><%- current %></a>
							</li>
							<% if (next) { %>
								<li>
									<a onclick="getMessageList(<%- next %>)"><%- next %></a>
								</li>
							<% } %>
							<% if(current < (count - 1)){ %>
								<li class="disabled">
									<a>..</a>
								</li>
							<% } %>
							<li>
								<a onclick="getMessageList(<%- count %>)">&raquo;</a>
							</li>
						</ul>
					</script>
				</td>
			</tr>
		</tfoot>
			</table>
		</div>
		<div class="tab-pane" id="tab-add">
			<form id="form-add">
				<div class="form-group">
					<textarea class="form-control" rows="3" name="text" placeholder="提问内容"></textarea>
				</div>
				<button type="submit" class="btn btn-primary btn-lg btn-block">
					提出问题
				</button>
			</form>
		</div>
	</div>
</div>


<script>
	var $table = $('#table-msglist'),
		$tbody = $table.find('tbody'),
		$formToggle = $('#form-qna-toggle'),
		$formAdd = $('#form-add'),
        trTmpl = _.template($tbody.find('#tr-tmpl').html()),
        $paginTmpl = $table.find('#pagin-tmpl'),
		paginTmpl = _.template($paginTmpl.html());


	$.get("/do/a/getqna",function(resObj){
		var state = resObj['state'];
		$formToggle.find('[value="'+ state +'"]').addClass('active');
	});

	$('.nav-tabs a').click(function (e) {
		e.preventDefault();
		getMessageList();
		$(this).tab('show');
	}).first().tab('show');

	$formAdd.ajaxForm({
		type: 'post',
		url: '/do/a/sendmsg',
		success: function(resObj) {
			var ok = resObj['ok'], msg = resObj['msg'];
			msg && notify(msg, ok);
			ok && reloadFrame();
		}
	});
	getMessageList(1);

	function getMessageList(page) {
		$.get('/do/a/msglist',{
		page:page
	},  function(resObj){
			var ok = resObj['ok'], msg = resObj['msg'];
			msg && notify(msg, ok);
			if (! ok) return;
			var total = resObj['total'],			
				msgList = resObj['msgList'];
			if (! msgList.length) {
				return $tbody.html([
					'<tr class="text-center">',
						'<td colspan="2">没有记录</td>',
					'</tr>'
				].join(''));
			}
            $tbody.html(_.reduce(msgList, function(memo, msg){
                return memo + trTmpl({
                    audienceName:msg.audienceName,
                    text: msg.text
                });
            }, ''));
            var count = Math.ceil(total / pageSize);
			$paginTmpl.next().remove();
			$paginTmpl.after(paginTmpl({
				current: page,
				prev: page > 1 ? page - 1 : null,
				next: page < count ? page + 1 : null,
				count: count
			}));
		});
	}
</script>